<template>

        <!-- 用户信息 -->
        <el-card class="user-info">
          <h2 slot="header">用户信息</h2>
          <el-form :model="user" label-position="top">
            <el-form-item label="用户名">
              <el-input v-model="user.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="Email">
              <el-input v-model="user.email" disabled></el-input>
            </el-form-item>
          </el-form>
        </el-card>
  
        <!-- 个人设置 -->
        <el-card class="personal-settings">
          <h2 slot="header">个人设置</h2>
          <el-form :model="user" label-position="top">
            <el-form-item label="昵称">
              <el-input v-model="user.nickname"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="user.phone"></el-input>
            </el-form-item>
            <el-button @click="updateUserInfo" type="primary">保存</el-button>
          </el-form>
        </el-card>
  
        <!-- 密码更改 -->
        <el-card class="password-change">
          <h2 slot="header">密码更改</h2>
          <el-form :model="passwordForm" label-position="top">
            <el-form-item label="当前密码">
              <el-input v-model="passwordForm.currentPassword" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input v-model="passwordForm.newPassword" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认新密码">
              <el-input v-model="passwordForm.confirmPassword" show-password></el-input>
            </el-form-item>
            <el-button @click="changePassword" type="primary">修改密码</el-button>
          </el-form>
        </el-card>
    
  </template>
  
  <script>
  import useUser from "@/store/users"
  
  export default {
    data() {
      return {
        user: {
          username: 'johndoe',
          email: 'johndoe@example.com',
          nickname: 'John Doe',
          phone: '123-456-7890',
        },
        passwordForm: {
          currentPassword: '',
          newPassword: '',
          confirmPassword: '',
        },
      };
    },
    methods: {
      updateUserInfo() {
        // 实现更新用户信息的逻辑
        console.log('用户信息已更新');
      },
      changePassword() {
        // 实现修改密码的逻辑
        if (this.passwordForm.newPassword === this.passwordForm.confirmPassword) {
          console.log('密码已修改');
        } else {
          this.$message.error('新密码和确认密码不匹配');
        }
      },
    },
    mounted(){
        let userStore = useUser();
        this.user = userStore.userInfo
    },
    name: 'mine',
    meta:{
        name:"我的中心",
        icon:"icon-xingzhuanggongnengtubiao-"
    }
  };
  </script>
  
  <style scoped>
  /* 样式可以根据需求自行添加 */
  .user-info,
  .personal-settings,
  .password-change {
    margin: 20px;
    padding: 20px;
  }
  
  h1 {
    font-size: 24px;
  }
  
  </style>
  
  
  
  
<!-- <script>
export default {
    name: 'mine',
    meta:{
        name:"我的中心",
        icon:"icon-xingzhuanggongnengtubiao-"
    }
}
</script> -->